<script lang="ts" setup>
import {ElMessage} from 'element-plus'
import {defineEmits} from "vue";

/**
 * props
 */
const props = defineProps({
  /**
   * 名称
   */
  title: {
    type: String,
    default: ''
  },
  /**
   * 概述
   */
  des: {
    type: String,
    default: ''
  },
  /**
   * 示例队列
   */
  examples: {
    type: Array,
    default() {
      return []
    }
  },
  /**
   * 组件api 包含props、methods、event
   */
  api: {
    type: Object,
    default() {
      return {}
    }
  }
})
/*
 * 复制代码
 * code 代码内容
 */
const copy = (code: any) => {
  const el = document.createElement('textarea');
  el.value = code;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
  ElMessage.success('复制成功！');
}
/*
 * 显示隐藏代码
 * key 示例类型的key值
 */
const codeToggle = (key: String) => {
  emit('code-toggle', key);
}

const emit = defineEmits(['code-toggle']);
</script>
<template>
  <div class="h-full pt-80px flex justify-center overflow-y-auto">
    <div class="w-800px">
      <h1>{{ props.title }}</h1>
      <h2>概述</h2>
      <p v-html="props.des" class="des"></p>
      <h2>代码示例</h2>
      <div class="example-item" v-for="item in props.examples" :key="item.key">
        <slot :name="item.key"></slot>
        <el-divider content-position="left">{{ item.title }}</el-divider>
        <p v-html="item.des" class="des"></p>
        <el-divider border-style="dashed"/>
        <div class="flex justify-end mb-10px">
          <el-tooltip
              class="box-item"
              effect="dark"
              content="复制"
              placement="top"
          >
            <el-icon class="cursor-pointer" @click="copy(item.code)">
              <Document/>
            </el-icon>
          </el-tooltip>
          <el-tooltip
              class="box-item"
              effect="dark"
              content="展开代码"
              placement="top"
          >
            <el-icon class="cursor-pointer ml-15px" @click="codeToggle(item.key)">
              <Crop/>
            </el-icon>
          </el-tooltip>
        </div>
        <highlightjs v-show="item.codeShow" language='C#' :code="item.code"/>
      </div>
      <h1 class="mt-16px mb-16px">API</h1>
      <h2>CisTable Props</h2>
      <CisTable :data="props.api['props']" :pageShow="false">
        <el-table-column prop="name" label="属性" width="250"/>
        <el-table-column prop="des" label="说明"/>
        <el-table-column prop="type" label="类型" width="170"/>
        <el-table-column prop="default" label="默认值" width="150"/>
      </CisTable>
    </div>
    <div>锚点</div>
  </div>
  <CisFlexScroll>
  </CisFlexScroll>
</template>
<style lang="scss" scoped>
h1 {
  font-size: 2.2rem;
  margin-bottom: 0.6em;
}

h2 {
  font-size: 24px;
  margin-bottom: 0.6em;
}

.des {
  font-size: 14px;
  margin-bottom: 1rem;
  color: #515a6e;
  overflow-wrap: break-word;
}

.example-item {
  border: 1px solid #eee;
  padding: 16px 16px 0;
  border-radius: 4px;
}
</style>